<template>
  <PanerForm :isShowBarDrawer="true" :caption="isEdit ? '编辑项目' : ''">
    <template #body>
      <div class="d-row">
        <div class="d-form-group d-form-group-flex">
          <div class="d-form-label d-text-right">
            <label class="label-text">名称</label>
          </div>
          <div class="d-form-el">
            <FormInput v-model="state.name" :mode="mode" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex">
          <div class="d-form-label d-text-right">
            <label class="label-text">父产品</label>
          </div>
          <div class="d-form-el">
            <FormSelecter
              :mode="mode"
              v-model="state.pid"
              :data="productList"
              defaultText="-"
              value-key="id"
              :text-key="'text'"
              slide-max-height="200px" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex">
          <div class="d-form-label d-text-right">
            <label class="label-text">详情</label>
          </div>
          <div class="d-form-el d-form-product">
             <HtmlViewer v-model="state.items[0].content" :mode="mode" ref="htmlViewer" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex">
          <div class="d-form-label d-text-right">
            <label class="label-text">描述</label>
          </div>
          <div class="d-form-el">
            <FormTextarea v-model="state.description" :mode="mode" />
          </div>
        </div>
        <FormGroup v-if="mode !== STATUS.RENDER" label="状态" labelWidth="90px" col="6">
          <FormSelecter
            :mode="mode"
            v-model="state.status"
            :data="statusList"
            value-key="id"
            :text-key="'text'"
            slide-max-height="200px" />
        </FormGroup>
        <FormGroup v-if="mode !== STATUS.RENDER" label="排序" labelWidth="90px" col="6">
          <FormInput v-model="state.order" :mode="mode" placeholder="数值越大越靠前" />
        </FormGroup>
      </div>
    </template>
    <template #bar-drawer>
      <button @click="handleSubmit" class="d-btn d-btn-primary" type="button">提交</button>
      <button @click="handleReset" class="d-btn d-btn-default" type="reset">重置</button>
      <a v-d-goback class="d-btn d-btn-default">返回</a>
    </template>
  </PanerForm>
</template>

<script>
import { PanerForm } from '@daelui/vdog/dist/pages'
import { FormGroup, FormInput, FormTextarea, Dialoger, FormCalendar, FormSelecter } from '@daelui/vdog/dist/components'
import { HtmlViewer } from '@daelui/vdog/dist/viewer'
import { zh as locale } from '@daelui/dogjs/dist/locale'
import { parser } from '@daelui/dogjs/dist/components'
import proSer from '../../service/action/product.action'
import { state } from '../../service/stock/index.js'
import { STATUS } from '@daelui/dogjs/dist/constant'

export default {
  components: {
    FormGroup,
    FormInput,
    FormTextarea,
    PanerForm,
    FormCalendar,
    Dialoger,
    FormSelecter,
    HtmlViewer
  },

  data () {
    return {
      STATUS,
      mode: STATUS.RENDER,
      isEdit: false, // 是否是编辑模式
      // 表单数据
      state: {
        id: '',
        name: '',
        pid: '',
        items: [{type: 'html', content: ''}],
        description: '',
        status: 1,
        order: 1,
        updateTime: '',
        updateUser: '',
        createTime: '',
        createUser: ''
      },
      // 状态列表
      statusList: state.statusList,
      // 产品列表
      productList: []
    }
  },

  methods: {
    /**
     * @function 加载数据
    */
    loadItem (id) {
      proSer.queryItem({ id }).then(result => {
        let data = result.data || {}
        data.items = parser.parse(data.items, 'array', true, [{type: 'html', content: ''}])
        this.state = data
        this.$refs.htmlViewer.update(data.items[0].content)
      })
    },

    /**
     * @function 提交
    */
    handleSubmit () {
      let defer = null
      delete this.state.createTime
      // 编辑
      if (this.isEdit) {
        defer = proSer.editItem(this.state)
      } else { // 添加
        defer = proSer.addItem(this.state)
      }
      defer.then(result => {
        if (result.success) {
          Dialoger.success(locale.action.success)
        } else {
          Dialoger.danger(locale.action.fail)
        }
        // 添加则回到列表页
        if (!this.isEdit) {
          this.$router.push(this.getMicroRoute('/product/list'))
        }
      })
    },

    /**
     * @function 重置
    */
    handleReset () {

    }
  },

  beforeMount () {
    let params = this.$route.params
    // 新建
    if (!params.id) {
      this.isEdit = false
      this.mode = STATUS.EDIT
    } else { // 编辑
      if (/view\//.test(this.$route.path)) {
        this.mode = STATUS.RENDER
      } else {
        this.mode = STATUS.EDIT
        this.isEdit = true
      }
      this.loadItem(params.id)
    }
    proSer.queryListAllOption(false).then(list => {
      this.productList = list.filter(item => {
        return String(item.id) !== String(params.id)
      })
    })
  },

  mounted () {

  }
}
</script>

<style scoped>
.d-form-label {
  width: 90px;
}
</style>
<style lang="less">
.d-form-product .d-editor-container {
  height: 442px;
  .quill-editor {
    height: 400px
  }
}
</style>
